<template>
  <div class="img-wrap load-fade">
      <div class="poem-wrap">
        <!-- <div v-else><span>{{ }}</span></div> -->
        <p class="poem ellipsis" >
          {{ poem_cn }}
        </p>
        <p class="info ellipsis">
          {{ poem_en }}
        </p>
      </div>
    </div>
</template>
<script>
import { getPoem } from '../api/randomApi';
export default {
  name: 'backgroundImg',
  data() {
    return {
      poem_cn: '',
      poem_en: '',
      url: ''
    }
  },
  created() {
    getPoem().then(res => {
      console.log(res.data);
      this.poem_cn = res.cn;
      this.poem_en = res.en;
    })
  },

  methods: {
  }
}
</script>
<style scoped>
.img-wrap {
  width: 100%;
  height: 50vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302');
}

.poem-wrap {
  width: 100%;
  height: 100%;
  color: white;
  font-family: 'backgroundImgFont';
  background-color: rgba(0, 0, 0, 0.5); 
  align-content: center;
  text-align: center;
}

.poem {
  font-size: 50px;
  margin-bottom: 30px;
}

.info {
  font-size: 30px;
}
@media  screen and (min-width: 1024px) {
  .ellipsis{
    max-width: 100%;
    /* 防止文本换行 */
    white-space: nowrap;
    /* 隐藏超出的部分 */
    overflow: hidden;
    /* 当文本溢出时显示省略号 */
    text-overflow: ellipsis;
}
  
}
@media screen and (max-width: 768px) {
  .info{
    font-size: 15px;
  }
  .poem {
    font-size: 25px;
  }
}
</style>